<script setup>
import ChatUserItem from '@/components/app-chat/cpn/chat-user-item/chat-user-item.vue'

const props = defineProps(['chatUserListMap', 'activeChatId'])

const emit = defineEmits(['select'])
const handleSelect = (id) => {
  emit('select', id)
}
</script>

<template>
  <div class="chat-user-list">
    <template v-for="item in chatUserListMap.values()" :key="item._id">
      <chat-user-item :item="item" :active="activeChatId === item._id" @click="handleSelect(item._id)"/>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.chat-user-list {
  @include flex-box(false, true);
  width: 260px;
  flex-shrink: 0;
  gap: $spacing-2;
  height: 100%;
  border-right: 1px $divider dashed;
  overflow: auto;
}
</style>
